<template>
  <div class="player" id="myplayer">
    <div class="player-header">
      <div class="goback" @click="turnBack">
        <i class="iconfont icon-backarrow"></i>
      </div>
      <h1>{{my_list[my_index][2]}}</h1>
      <!-- <h1>{{my_list[my_index][2]}}</h1> -->
      <p>{{my_list[my_index][3]}}</p>
    </div>
    <div class="cd-container">
      <div class="cd_part" :class="{ cd_paused: !isPlay }" @click="getAudioInfo">
        <img :src="my_list[my_index][1] + '?param=400y400' " alt>
      </div>
    </div>


    <div class="audio-area">
      <div class="mf">
        <MusicFlash :isPlay="isPlay" />
      </div>
      <audio
        autoplay
        id="audio"
        :src="'https://music.163.com/song/media/outer/url?id='+this.$store.state.playerData.id+'.mp3'"
      ></audio>
    </div>
    <div class="user-area">
      <div class="alert-box" v-show="showAlert">{{showAlertText}}</div>
      <div class="timeline-area">
        <!-- <ProgressBar @changeProgress='change'></ProgressBar> -->
      </div>
      <div class="btn-area">
        <div class="btn-box" @click="changePlayState">
          <i class="iconfont icon-suijibofang" v-if="playState == 'Random' "></i>
          <i class="iconfont icon-danquxunhuan" v-else-if="playState == 'Single' "></i>
          <i class="iconfont icon-liebiaoxunhuan" v-else></i>
        </div>
        <div class="btn-box" @click="clickLeft">
          <i class="iconfont icon-play-before-copy"></i>
        </div>
        <div class="btn-box" @click="playMusic">
          <i class="iconfont icon-zanting" v-if="isPlay"></i>
          <i class="iconfont icon-zanting1" v-else></i>
        </div>
        <div class="btn-box" @click="clickRight">
          <i class="iconfont icon-play-next-"></i>
        </div>
        <div class="btn-box" id="menuPL" @click="listMenuShow">
          <i class="iconfont icon-menu"></i>
          <div id="menuList" v-show="listShow" @click.stop>
            <div class="list">
              <div
                v-for="(item, idx) in my_list"
                :key="idx"
                @click="choose($event, idx)"
                :class="{ list_active: (idx==songIndex) }"
              >
                <p>
                  {{idx+1}}. {{item[2]}}
                  <em>- {{item[3]}}</em>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { setTimeout, clearTimeout, clearInterval } from "timers";
import ProgressBar from "../components/ProgressBar";
import MusicFlash from "../components/MusicFlash"
export default {
  created() {
    /* Data Save */
    // this.songIndex =
    for (
      let index = 0;
      index < this.$route.params.song_belong_playlist.length;
      index++
    ) {
      if (
        this.$route.params.song_belong_playlist[index][0] ==
        this.$route.params.song_id
      ) {
        this.songIndex = index;
      }
    }
    this.$store.commit("updatePlayerData", [
      this.$route.params.song_id,
      this.$route.params.song_name,
      this.$route.params.song_art,
      this.$route.params.song_album_img,
      this.$route.params.song_belong_playlist,
      this.songIndex
    ]);
    console.log("init");
    this.$store.state.playerData.list.forEach((element, index) => {
      if (this.$store.state.playerData.id == element[0]) {
        this.$store.state.playerData.index = index;
      }
    });

    // this.my_list = this.$store.state.playerData.list;
  },
  beforeDestroy() {
    this.$store.commit("showPlayerBar");
  },
  data() {
    return {
      isPlay: true,
      showAlert: false,
      listShow: false,
      scrollTimer: null,
      arr_state: ["List", "Single", "Random"],
      playStateCode: 0,
      songIndex: this.$store.state.playerData.index
    };
  },
  computed: {
    playState: function() {
      return this.arr_state[this.playStateCode];
    },
    showAlertText: function() {
      let text = "";
      switch (this.playStateCode) {
        case 0:
          text = "列表循环";
          break;
        case 1:
          text = "单曲循环";
          break;
        case 2:
          text = "随机播放";
          break;
        default:
          break;
      }
      return text;
    },
    my_list() {
      return this.$store.state.playerData.list;
    },
    my_index() {
      return this.$store.state.playerData.index;
    }
  },
  watch: {
    songIndex: function() {
      this.update();
      this.updateListPos();
    }
  },
  methods: {
    playMusic() {
      this.isPlay = !this.isPlay;
      var audio = document.getElementById("audio");

      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
    },
    changePlayState() {
      let num = this.playStateCode;
      num++;
      if (num > 2) {
        num = 0;
      }
      this.playStateCode = num;
      this.showAlert = true;
      var timer_box = setTimeout(() => {
        this.showAlert = false;
        clearTimeout(timer_box);
      }, 2000);
    },
    update() {
      /* changes by songIndex : 1.song_id 2.$store.songid 3.img_url 4.music_url 5.song_name */
      this.$store.commit("updatePlayerData", [
        this.$store.state.playerData.list[this.songIndex][0],
        this.$store.state.playerData.list[this.songIndex][2],
        this.$store.state.playerData.list[this.songIndex][3],
        this.$store.state.playerData.list[this.songIndex][1],
        this.$route.params.song_belong_playlist,
        this.songIndex
      ]);
    },
    clickRight() {
      if (this.playStateCode == 0) {
        this.songIndex++;
        if (this.songIndex >= this.$store.state.playerData.list.length) {
          this.songIndex = this.$store.state.playerData.list.length - 1;
        }
      } else if (this.playStateCode == 2) {
        this.songIndex = this.generateRandom();
      }
    },
    clickLeft() {
      if (this.playStateCode == 0) {
        this.songIndex--;
        if (this.songIndex <= 0) {
          this.songIndex = 0;
        }
      } else if (this.playStateCode == 2) {
        this.songIndex = this.generateRandom();
      }
    },
    generateRandom() {
      let len = this.$store.state.playerData.list.length;
      let rand = Math.floor(len * Math.random());
      console.log(rand);
      return rand;
    },
    choose(eve, idx) {
      this.songIndex = idx;
    },
    turnBack() {
      console.log("turn back");
      history.back();
    },
    getAudioInfo() {
      let audio = document.getElementById("audio");
      console.log(audio.duration);
      audio.addEventListener("timeupdate", function() {
        let timeDisplay;
        timeDisplay = Math.floor(audio.currentTime);
        console.log(timeDisplay);
      });
    },
    updateListPos() {
      /* flag == true slow speed */
      if (this.listShow == true) {

        if (this.scrollTimer) {
          window.clearInterval(this.scrollTimer);
          this.scrollTimer = null;
        }

        var ml = document.getElementById("menuList");
        var active = ml.getElementsByClassName("list_active")[0];
        let target = (this.songIndex-2) * 31;
        // let step = Math.abs(ml.scrollTop - target) / 100;
        let step = 0;
        if (this.playStateCode == 0) {
          step = 1;
        } else {
          step = Math.abs(ml.scrollTop - target) / 100;
        }
        /* timer */
        if (ml.scrollTop >= target) {
          console.log("to top mlst-");
          this.scrollTimer = setInterval(() => {
            ml.scrollTop-=step;
            if (ml.scrollTop <= target) {
              window.clearInterval(this.scrollTimer);
              this.scrollTimer = null;
            }
          }, 10);
        } else {
          console.log("to bot +");
          this.scrollTimer = setInterval(() => {
            ml.scrollTop+=step;
            if (ml.scrollTop >= target) {
              window.clearInterval(this.scrollTimer);
              this.scrollTimer = null;
            }
          }, 10);
        }
      }
    },

    change(persent) {
      // this.player.duration
      console.log(persent);
    },
    listMenuShow() {
      this.listShow = !this.listShow;
      this.updateListPos();
    }
  },
  components: {
    ProgressBar,
    MusicFlash
  }
};
</script>

<style lang="scss" scoped>
.myplayer {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.player-header {
  position: relative;
  z-index: 1;
  height: 60px;
  padding: 15px;
  padding-left: 40px;
  text-align: left;
  .goback {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #eeeeee;
  }
  h1 {
    color: #eeeeee;
    font-size: 16px;
    font-weight: normal;
  }
  p {
    color: #cccccc;
    font-size: 12px;
    margin-top: 5px;
  }
}
.cd-container {
  margin: 0 auto;
  width: 80%;
  padding-top: 40%;
  padding-bottom: 40%;
  position: relative;
}
.mf{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  
}
.cd_part {
  animation: rtt 15s linear 1s infinite normal;
  animation-play-state: running;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 30px solid rgba($color: #000000, $alpha: 0.5);
  border-radius: 50%;
  background-color: #333333;
  img {
    width: auto;
    height: 100%;
  }
}
.cd_paused {
  animation-play-state: paused;
}
.audio-area {
  position: relative;
  width: 100%;
  height: 100px;
  margin-top: 30px;
  z-index: 1;
  // background-color: #fff;

  audio {
    width: 100%;
    border: 1px solid black;
  }
}
.user-area {
  width: 100%;
  height: 160px;
  padding: 20px;
  background-color: rgba($color: #000000, $alpha: 0.15);
  position: fixed;
  z-index: 1;
  bottom: 0;
  text-align: center;
  .timeline-area {
    width: 100%;
    background-color: rgba($color: #ffffff, $alpha: 0.15);
    height: 60px;
    position: relative;
  }
  .btn-area {
    width: 100%;
    height: 100px;
    .btn-box {
      display: inline-block;
      vertical-align: top;
      width: 20%;
      height: 100%;
      font-size: 50px;
      color: #eeeeee;
      .iconfont {
        font-size: 30px;
        line-height: 60px;
      }
    }
  }
  .alert-box {
    position: absolute;
    z-index: 99;
    max-width: 100px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    background-color: rgba($color: #ffffff, $alpha: 0.25);
    color: #eeeeee;
    top: -120px;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 12px;
  }
}
#menuPL {
  position: relative;
}
#menuList {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 500%;
  min-height: 100px;
  max-height: 150px;
  overflow-y: scroll;
  background-color: rgba($color: #000000, $alpha: 0.8);
  font-size: 14px;
  padding: 9px;
  text-align: left;
  box-shadow: inset 0px 0px 5px 0px;
  p {
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 30px;
    color: #eeeeee;
    text-indent: 1em;

    em {
      font-size: 12px;
      color: #dddddd;
    }
  }
}
@keyframes rtt {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.list_active {
  box-shadow: inset 0px 0px 15px 0px;
}
</style>